import React, { useState, useEffect } from 'react';
import {
  Button,
  Select,
  DatePicker,
  Form,
  Table,
  Space,
  Pagination,
  Spin,
} from 'antd';
import { Link } from 'react-router-dom';
import request from '../../../../http';
import './group.css';

const { Option } = Select;

//孙康铭
const group = () => {
  const columns = [
    {
      title: '日期',
      dataIndex: '日期',
      key: '日期',
    },
    {
      title: '学号',
      dataIndex: '学号',
      key: '学号',
    },
    {
      title: '姓名',
      dataIndex: '姓名',
      key: '姓名',
    },
    {
      title: '打卡时间',
      dataIndex: '打卡时间',
      key: '打卡时间',
    },
    {
      title: '打卡设备',
      dataIndex: '打卡设备',
      key: '打卡设备',
    },
  ];
  //定义表格数据
  const [data, setdata] = useState([{}]);
  ///判断分页搜索
  const [pagination, setpagination] = useState('false');
  const [pagination1, setpagination1] = useState('true');
  //接收的分页数
  const [sum, setsum] = useState(1);
  const [sumPage, setsumPage] = useState(1);
  //获取日期
  const [Date, setDate] = useState(0);
  //加载
  const [loading, setloading] = useState(0);

  //全局搜索
  useEffect(() => {
    //学生请假
    request
      .post('/att/student/queryPunchRecord', {
        number: 10,
        page: 1,
      })
      .then((res) => {
        // console.log("学生请假记录请求成功", res)
        setloading(1);
        const p = res.data.returnDate;
        const newP = p.map((dataObj) => {
          return {
            日期: dataObj.date,
            学号: dataObj.studentId,
            姓名: dataObj.studentName,
            打卡时间: dataObj.clockDateTime,
            打卡设备: dataObj.punchDevice,
          };
        });
        setdata(newP);
        setsum(res.data.paginationData.sum);
        setsumPage(res.data.paginationData.sumPage);
      });
  }, []);

  //分页搜索
  const pageChange = (page, pageSize) => {
    if (pagination == 'false') {
      // console.log("搜索之前分页")
      request
        .post('/att/student/queryPunchRecord', {
          number: pageSize,
          page: page,
        })
        .then((res) => {
          // console.log("学生请假记录请求成功", res)
          const p = res.data.returnDate;
          const newP = p.map((dataObj) => {
            return {
              日期: dataObj.date,
              学号: dataObj.studentId,
              姓名: dataObj.studentName,
              打卡时间: dataObj.clockDateTime,
              打卡设备: dataObj.punchDevice,
            };
          });
          setdata(newP);
          setsum(res.data.paginationData.sum);
          setsumPage(res.data.paginationData.sumPage);
        })
        .catch((err) => {
          console.log('搜索之前分页--分页失败', err);
        });
    } else if (pagination1 == 'true') {
      request
        .post('/att/student/queryPunchRecord', {
          number: 10,
          page: 1,
          date: Date || '',
        })
        .then((res) => {
          console.log('查询搜索请求成功', res.data.returnDate);
          const datas = res.data.returnDate;
          const newDatas = datas.map((dataObj) => {
            return {
              日期: dataObj.date,
              学号: dataObj.studentId,
              姓名: dataObj.studentName,
              打卡时间: dataObj.clockDateTime,
              打卡设备: dataObj.punchDevice,
            };
          });
          setdata(newDatas);
          setsum(res.data.paginationData.sum);
          setsumPage(res.data.paginationData.sumPage);
        })
        .catch(() => {
          alert('该查询没有数据!');
          setdata('');
        });
    }
  };

  //查询搜索
  const onBtn = () => {
    request
      .post('/att/student/queryPunchRecord', {
        number: 10,
        page: 1,
        date: Date || '',
      })
      .then((res) => {
        // console.log('查询搜索请求成功', res);
        const datas = res.data.returnDate;
        const newDatas = datas.map((dataObj) => {
          return {
            日期: dataObj.date,
            学号: dataObj.studentId,
            姓名: dataObj.studentName,
            打卡时间: dataObj.clockDateTime,
            打卡设备: dataObj.punchDevice,
          };
        });
        setdata(newDatas);
        setsum(res.data.paginationData.sum);
        setsumPage(res.data.paginationData.sumPage);
        setpagination('true');
        setpagination1('true');
      })
      .catch(() => {
        alert('该查询没有数据!');
        setdata('');
        setsum('');
      });
  };

  //重置搜索
  const onReset = () => {
    history.go(0);
    //学生请假
    request
      .post('/att/student/queryPunchRecord', {
        number: 10,
        page: 1,
      })
      .then((res) => {
        // console.log("学生请假记录请求成功", res)
        const p = res.data.returnDate;
        const newP = p.map((dataObj) => {
          return {
            日期: dataObj.date,
            学号: dataObj.studentId,
            姓名: dataObj.studentName,
            打卡时间: dataObj.clockDateTime,
            打卡设备: dataObj.punchDevice,
          };
        });
        setdata(newP);
        setsum(res.data.paginationData.sum);
        setsumPage(res.data.paginationData.sumPage);
        setpagination('false');
      });
  };

  //获取选择日期
  const DateChange = (date, dateString) => {
    setDate(dateString);
  };

  return (
    <div>
      <div className="tabBar">
        <Link to="../index">
          <Button style={{ padding: '5px 50px' }}>项目考勤记录</Button>
        </Link>
        <Button type="primary" style={{ padding: '5px 50px' }}>
          打卡记录
        </Button>
      </div>
      <Form>
        <div className="prjName">
          日期: &nbsp;&nbsp;
          <Space direction="vertical" size={12}>
            <DatePicker showTime onChange={DateChange} />
          </Space>
          <div className="btn" style={{ marginTop: -34 }}>
            <Button
              type="primary"
              style={{ padding: '5px 20px' }}
              onClick={onBtn}
            >
              查询
            </Button>
            <Button style={{ padding: '5px 20px' }} onClick={onReset}>
              重置
            </Button>
          </div>
        </div>
        <div className="form">
          {loading == 0 ? (
            <div className="example">
              <Spin size="large" />
            </div>
          ) : (
            <div>
              <Table columns={columns} dataSource={data} pagination={false} />
              <div>
                <Pagination
                  total={sum}
                  onChange={pageChange}
                  hideOnSinglePage={true}
                />
              </div>
            </div>
          )}
        </div>
      </Form>
    </div>
  );
};

export default group;
